<template>
  <div class="container">
    <div v-html="content" v-if="!isList" class="content ql-editor"></div>
    <div
      v-else
      style="width: 100%; padding 20px;text-align:center;padding-bottom:100px;display: flex;margin-top:16px;
      justify-content: center;
    flex-wrap: wrap"
    >
      <div
        class="card"
        @click="toPaperDetail(item.organizationName, item.introduceMsg)"
        v-for="item in list"
        :key="item.id"
        style="width: 50%; cursor: pointer"
      >
        <!-- <div v-html="item.introduceMsg" class="content ql-editor"></div> -->
        <div>
          <div class="partner-image">
            <el-image
              style="height: 120px; width: 80%; border-radius: 20px"
              fit="fill"
              :src="item.thumbnail"
            />
          </div>
          <div style="margin-top: 10px">
            <div class="partner-name">
              {{ item.organizationName }}
            </div>
          </div>
        </div>
        <div
          style="height: 1px; text-align: center; margin: 20px auto 20px"
        ></div>
      </div>
      <div
        style="
          position: fixed;
          display: flex;
          justify-content: center;
          bottom: 0px;
          width: 100%;
          height: 100px;
          background: #fff;
          padding-top: 20px;
        "
      >
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          @current-change="getPage"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Axios from "axios"
export default {
  name: "IndexContentDetail",
  data() {
    return {
      content: "",
      isList: false,
      list: [],
      pageSize: 8,
      pageNum: 1,
      total: 0,
    }
  },
  created() {
    if (this.$route.params.isList) {
      this.isList = true
      this.getData()
    } else {
      this.content = this.$route.params.content
    }
  },
  methods: {
    getData() {
      Axios.get(
        `http://admin.zgzyebh120.com/api/system/website/getOrganization?pageNum=${this.pageNum}&pageSize=${this.pageSize}`
      )
        .then((res) => {
          this.list = res.data.data.list
          this.total = res.data.data.total
          // console.log(this.apiData)
        })
        .catch((error) => {
          console.log(error)
        })
    },
    toPaperDetail(title, content) {
      // console.log(content)
      this.content = content
      this.isList = false

      /*   this.$router.push({
        name: "IndexContentDetail",
        params: {
          content: content,
        },
      }) */
    },
    getPage(v) {
      this.pageNum = v
      this.getData()
    },
  },
}
</script>

<style lang="stylus" scoped>
.container
  display flex
  flex-direction column
  justify-content center
  position relative
  width 100%
  padding-top 60px
  height: 100vh
  overflow-y scroll
  .content
    // width 70%
    margin 0 auto
    margin-top 0px
    ::v-deep img
      width: 100%
</style>
